<template>
  <el-dialog
    :visible="dialogVisible"
    width="680px"
    title="新增规则"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <!-- 表单接口 -->
    <div class="form-container">
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addFormRules"
        label-position="top"
      >
        <el-form-item label="计费规则编号" prop="ruleNumber" style="width: 60%">
          <el-input v-model="addForm.ruleNumber" />
        </el-form-item>
        <el-form-item label="计费规则名称" prop="ruleName" style="width: 60%">
          <el-input v-model="addForm.ruleName" />
        </el-form-item>
        <el-form-item label="计费方式" prop="chargeType">
          <el-radio-group v-model="addForm.chargeType" size="small">
            <el-radio label="duration" border>时长收费</el-radio>
            <el-radio label="turn" border>按次收费</el-radio>
            <el-radio label="partition" border>分段收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <div
          class="flex-container"
          style="display: flex; justify-content: space-between"
        >
          <el-form-item label="免费时长">
            <el-input v-model="addForm.freeDuration" />
          </el-form-item>
          <el-form-item label="收费上限">
            <el-input v-model="addForm.chargeCeiling" />
          </el-form-item>
        </div>
        <el-form-item label="计费规则" required>
          <!-- 按时长收费区域 -->
          <div
            class="duration"
            style="display: flex"
            v-if="addForm.chargeType == 'duration'"
          >
            每
            <el-form-item prop="durationTime">
              <el-input
                v-model="addForm.durationTime"
                class="input-box"
                style="width: 40%"
              />
            </el-form-item>
            小时
            <el-form-item prop="durationPrice">
              <el-input
                v-model="addForm.durationPrice"
                class="input-box"
                style="width: 40%"
              />
            </el-form-item>
            元
          </div>
          <!-- 按次收费区域 -->
          <div
            class="turn"
            style="display: flex"
            v-if="addForm.chargeType == 'turn'"
          >
            每次
            <el-form-item prop="turnPrice">
              <el-input v-model="addForm.turnPrice" class="input-box" />
            </el-form-item>
            元
          </div>
          <!-- 按分段收费区域 -->
          <div
            class="partition"
            style="display: flex"
            v-if="addForm.chargeType == 'partition'"
          >
            <div class="item">
              <el-form-item prop="partitionFrameTime">
                <el-input
                  v-model="addForm.partitionFrameTime"
                  class="input-box"
                  style="width: 20%"
                />
              </el-form-item>
              小时内,每小时收费
              <el-form-item prop="partitionFramePrice">
                <el-input
                  v-model="addForm.partitionFramePrice"
                  class="input-box"
                  style="width: 20%"
                />
              </el-form-item>
              元
            </div>
            <div class="item">
              每增加
              <el-form-item prop="partitionIncreaseTime">
                <el-input
                  v-model="addForm.partitionIncreaseTime"
                  class="input-box"
                  style="width: 20%"
                />
              </el-form-item>
              小时,增加
              <el-form-item prop="partitionIncreasePrice">
                <el-input
                  v-model="addForm.partitionIncreasePrice"
                  class="input-box"
                  style="width: 20%"
                />
              </el-form-item>
              元
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button size="mini" @click="closeDialog">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirmAdd"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
import { reqAddRuleAPI } from "@/api/carrule";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      addForm: {
        ruleNumber: "", // 计费规则编号
        ruleName: "", // 计费规则名称
        chargeType: "duration", // 计费规则类型 duration / turn / partition
        chargeCeiling: null,
        freeDuration: null,
        // 时长计费独有字段
        durationTime: null, // 时长计费单位时间
        durationPrice: null, // 时长计费单位价格
        durationType: "hour",
        // 按次收费独有字段
        turnPrice: null,
        // 分段计费独有字段
        partitionFrameTime: null, // 段内时间
        partitionFramePrice: null, // 段内费用
        partitionIncreaseTime: null, // 超出时间
        partitionIncreasePrice: null, // 超出费为收费价钱
      },
      addFormRules: {
        ruleNumber: [
          {
            required: true,
            message: "请输入规则编号",
            trigger: "blur",
          },
        ],
        ruleName: [
          {
            required: true,
            message: "请输入规则名称",
            trigger: "blur",
          },
        ],
        chargeType: [
          {
            required: true,
            message: "请选择收费类型",
            trigger: "blur",
          },
        ],
        durationTime: [
          {
            required: true,
            message: "请选择时长",
            trigger: "blur",
          },
        ],
        durationPrice: [
          { required: true, message: "请输入金额", trigger: "blur" },
        ],
        turnPrice: [{ required: true, message: "请输入次数", trigger: "blur" }],
        partitionFrameTime: [
          { required: true, message: "请输入段内时间", trigger: "blur" },
        ],
        partitionFramePrice: [
          { required: true, message: "请输入段内费用", trigger: "blur" },
        ],
        partitionIncreaseTime: [
          { required: true, message: "请输入超出时间", trigger: "blur" },
        ],
        partitionIncreasePrice: [
          {
            required: true,
            message: "请输入超出费用",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    // 监听对象中的属性值变化
    "addForm.chargeType"(val) {
      console.log(val);
      // 点击的时候清空所有校验提示
      this.$refs.addForm.clearValidate([
        "durationTime",
        "durationPrice",
        "partitionFrameTime",
        "partitionFramePrice",
        "partitionIncreaseTime",
        "partitionIncreasePrice",
      ]);
    },
  },
  methods: {
    closeDialog() {
      this.$refs.addForm.resetFields();
      this.$emit("cls");
      this.addForm.freeDuration = "";
      this.addForm.chargeCeiling = "";
    },
    // 确定按钮
    confirmAdd() {
      this.$refs.addForm.validate(async (flag) => {
        if (!flag) {
          return;
        }
        const res = await reqAddRuleAPI(this.addForm);
        console.log(res);
        this.$notify.success("添加成功");
        // 通知父组件
        // 1.this.$parent
        // 2.this.$emit
        // 3. .sync子组件和父组件进行双向数据绑定 【父组件加上.sync之后表示放权给子组件（可以修改父组件中.sync修饰的数据）】
        //【固定语法：this,$emit('update:props传过来的值'，"要修改的值"】
        this.closeDialog();
        // this.$emit('getList')
        // 子调父，获取子组件实例
        this.$parent.getRuleList();
      });
    },
  },
};
</script>

<style scoped>
.form-container {
  padding: 0px 80px;
}
</style>
